<template>
  <div>
		<div class="list">
			<div class="box" v-for="(item,index) in addList" :key="index">
				<div class="left">
					<div class="pic">
					{{item.name[0]}}
					</div>
				</div>
				<div class="right">
					<div class="lf">
						<div class="top">
							<span class="cate" v-if="item.is_default == 1">默认</span>
							<span class="name">{{item.name}}</span>
							<span class="phone">{{item.phone}}</span>
						</div>
						<div class="ad">{{item.cityaddre}} {{item.address}}</div>
					</div>
					<div class="rt">
						<router-link :to='"/editBj?name="+item.name+"&phone="+item.phone+"&city="+item.cityaddre+"&daaress="+item.address+"&uid="+item.id+"&is_default="+item.is_default'>
						<div>
							<span>编辑</span>
						</div>
						</router-link>
					</div>
				</div>
			</div> 
		</div>
			<!-- 无数据 -->
			<div class="without" v-if="addList.length==0">
				<img src="../assets/order_center/kongbai.png" alt="">
				<span>暂无数据~</span> 
			</div>
					<div class="tianjia" @click="editClick()">添加新地址</div>

  </div>
</template>

<script>
export default {
  name: 'address',
  data () {
    return {
     index:0,
		 isshow:false,
		 addList:[],
    }
  },
  methods:{
    back: function() {
      this.$router.go(-1);
		},
		editClick:function(){
			this.$router.push("edit");
		}, 
		 addresslis:function(){ 
			let self = this;
      let url = "/api/addre/index"; 
			self.httpPost(url,{user_id:this.myid,token:this.token},function(res) {
				if (res.code === 200) {
					self.addList = res.data
				}else{
					self.$message.error(res.msg); 
        }
      })
		},
	},
	created(){
    document.title = "我的地址";
    this.token = localStorage.getItem('mytoken');
		this.myid = localStorage.getItem('myid');
		this.addresslis()
  }
}
</script>


<style scoped>
.box{
	background: #fff;
	margin-bottom: .1rem;
	display: flex;
	align-items: center;
}
.tianjia{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	line-height: 1rem;
	text-align: center;
	color: #fff;
	font-size: .32rem;
	background: #e53a30;
	z-index: 999;
	
}
.pic{
	width: .8rem;
	height: .8rem;
	background: #707070;
	color: #fff;
	border-radius: 100%;
	line-height: .8rem;
	font-size: .3rem;
	text-align: center;
}
.left{
	width: 1.2rem;
	height: 1.2rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
.right{
	display: flex;
	align-items: center;
	flex: 1;
	justify-content: space-between;
	padding-right: .3rem;
	font-size: .29rem;
}
.ad{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width:5.1rem;
	margin-top: .15rem;
}
.lf{
	color: #333;
}
.rt{
	color: #333
}
.cate{
	background: #e53a30;
	color: #fff;
	padding: 0 2px;
	border-radius: 2px;
}
/* 无数据 */
.without{
  width:100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 30%;
}
.without img{
  width: 3.23rem;
  height:3.16rem;
}
.without span:nth-child(2){
  font-size: .36rem;
  color:#707070;
  margin-top: .43rem;
}
.without span:nth-child(3){
  font-size: .30rem;
  color:#b7b7b7;
  margin-top: .3rem;
} 
</style>
